<template>
    <div class="order b">
        <div class="d">
            <lay-tab type="card" v-model="current" @change="tabChange">
                <lay-tab-item :title="item.title" :id="item.title" v-for="(item, index) in tabList" :key="index">
                    <div class="d">
                        <lay-table size="xs" :columns="columns" :data-source="dataSource" even :page="page"
                            :loading="orderLoading" @row-double="updaData($event)" height="550px">
                            <template v-slot:toolbar>
                                <div class="flex">
                                    <div class="div1">
                                        <lay-input size="sm" v-model="QueryValue" suffix-icon="layui-icon-search"
                                            placeholder="输入订单关键词">
                                        </lay-input>
                                    </div>
                                </div>
                            </template>
                            <template #sts="{ row }">
                                <lay-tag v-if="row.orderStatus === '待付款'" type="normal" size="sm">待付款</lay-tag>
                                <lay-tag v-if="row.orderStatus === '待发货'" type="primary" size="sm">待发货</lay-tag>
                                <lay-tag v-if="row.orderStatus === '待收货'" type="warm" size="sm">待收货</lay-tag>
                                <lay-tag v-if="row.orderStatus === '待评价'" type="warm" size="sm">待评价</lay-tag>
                                <lay-tag v-if="row.orderStatus === '退货'" type="danger" size="sm">退货</lay-tag>
                            </template>
                            <template #ordersChannel="{ row }">
                                <div class="div center channel" v-if="row.ordersChannel == '淘宝'">
                                    <img src="../../assets/tb.png" alt="">
                                    <p>淘宝</p>
                                </div>
                                <div class="div center channel" v-if="row.ordersChannel == '微信'">
                                    <img src="../../assets/wx.png" alt="">
                                    <p>微信</p>
                                </div>
                                <div class="div center channel" v-if="row.ordersChannel == '电脑'">
                                    <img src="../../assets/dn.png" alt="">
                                    <p>电脑</p>
                                </div>
                            </template>
                            <template #orderDate="{ row }">
                                <div class="di">
                                    {{ formatTime(row.orderDate) }}
                                </div>
                            </template>
                            <template #orderProductsList="{ row }">
                                <lay-tooltip trigger="hover" position="right" style="width: 500px;">
                                    <p style="color: #1890ff;cursor: pointer">查看</p>
                                    <template #content>
                                        <div class="goods-list">
                                            <div class="goods-item  flex" v-for="t in row.orderProductsList">
                                                <div class="goods-img">
                                                    <img :src="t.productImage" alt="">
                                                </div>
                                                <div class="goods-text ">
                                                    <h4>{{ t.productName }}</h4>
                                                    <p>
                                                        {{ t.otherProductInfo }}
                                                    </p>
                                                    <b>
                                                        <span class="span1">￥</span>
                                                        <span class="span2">{{ t.productPrice }}.00</span>
                                                        <span class="span3">x1</span>
                                                    </b>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </lay-tooltip>
                            </template>
                            <template v-slot:operation="{ row }">
                                <lay-button type="primary" size="xs" @click="updaData(row)">处理</lay-button>
                                <lay-button type="danger" size="xs" @click="deleteData(row)">删除</lay-button>
                            </template>
                        </lay-table>
                    </div>
                </lay-tab-item>
            </lay-tab>
        </div>
    </div>


    <lay-layer v-model="addDataVisible" :area="['700px', '600px']" title="处理订单">
        <div class="a">
            <lay-form :model="addDataForm" size="sm">
                <lay-form-item label="下单用户">
                    <lay-input v-model="addDataForm.userName" disabled></lay-input>
                </lay-form-item>
                <lay-form-item label="订单状态">
                    <lay-radio-group v-model="addDataForm.orderStatus">
                        <lay-radio value="待付款">待付款</lay-radio>
                        <lay-radio value="待发货">待发货</lay-radio>
                        <lay-radio value="待收货">待收货</lay-radio>
                        <lay-radio value="待评价">待评价</lay-radio>
                        <lay-radio value="退货">退货</lay-radio>
                    </lay-radio-group>
                </lay-form-item>
                <lay-form-item label="订单渠道">
                    <lay-radio-group v-model="addDataForm.ordersChannel">
                        <lay-radio value="淘宝">淘宝</lay-radio>
                        <lay-radio value="微信">微信</lay-radio>
                        <lay-radio value="电脑">电脑</lay-radio>
                    </lay-radio-group>
                </lay-form-item>
                <lay-form-item label="订单金额">
                    <lay-input v-model="addDataForm.totalAmount" style="width: 200px;">
                        <template #append="{ disabled }">
                            <lay-icon type="layui-icon-rmb"></lay-icon> &nbsp;
                        </template>
                    </lay-input>
                </lay-form-item>
                <lay-form-item label="下单时间">
                    <lay-date-picker v-model="addDataForm.orderDate" type='datetime' placeholder="下单时间"
                        timestamp></lay-date-picker>
                </lay-form-item>
                <lay-form-item label="订单内容">
                    <div class="order_list">
                        <lay-row space="10">
                            <lay-col :md="7" v-for="item in addDataForm.orderProductsList">
                                <div class="order_item c">
                                    <div class="item_img">
                                        <img :src="item.productImage" alt="">
                                    </div>
                                    <div class="item_text">
                                        <div class="item_title">{{ item.productName }}</div>
                                        <div class="lat">
                                            <p>
                                                {{ item.otherProductInfo }}
                                            </p>
                                        </div>
                                        <div class="item_price">
                                            <span class="span1">￥</span>
                                            <span class="span2">{{ item.productPrice }}.00</span>
                                            <span class="span3">×1</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="delete c" @click="deleteOrderGoods(addDataForm, item)">
                                    <lay-icon type="layui-icon-delete" size="24px" color="#F41130"></lay-icon>
                                </div> -->
                            </lay-col>
                            <lay-col :md="3">
                                <div class="order_item_add c" @click="addOrderGoods">
                                    <lay-icon type="layui-icon-addition"></lay-icon>
                                </div>
                            </lay-col>

                        </lay-row>
                    </div>
                </lay-form-item>
                <lay-form-item label="收货地址">
                    <lay-textarea placeholder="请输入描述" v-model="addDataForm.shippingAddress">
                    </lay-textarea>
                </lay-form-item>
            </lay-form>
        </div>
        <template #footer>
            <div class="div" style="padding:10px 20px;float: right;">
                <lay-button type="primary" @click="addData" size="sm" style="width: 100px;">确定</lay-button>
                <lay-button @click="addDataVisible = false" size="sm" style="width: 100px;">取消</lay-button>
            </div>
        </template>
    </lay-layer>
    <lay-layer v-model="addOrderGoodsVisible" :area="['1200px']" title="商品列表">
        <div class="a">
            <lay-table v-model:selectedKeys="selectedKeys" ref="tableRef" size="sm" :columns="columnsGoods"
                :data-source="dataSourceGoods" even :loading="GoodsLoading">
                <template #sts="{ row }">
                    <lay-tag type="primary" size="sm" v-if="row.productSts == '已下架'">已下架</lay-tag>
                    <lay-tag type="normal" size="sm" v-if="row.productSts == '已上架'"> 已上架</lay-tag>
                    <lay-tag type="danger" size="sm" v-if="row.productSts == '待发售'">待发售</lay-tag>
                </template>

                <template #image="{ row }">
                    <lay-tooltip trigger="hover" position="right">
                        <lay-avatar :src="row.productImage" size="lg"></lay-avatar>
                        <template #content>
                            <lay-avatar :src="row.productImage" size="lg"
                                style="width: 200px;height: 200px;"></lay-avatar>
                        </template>
                    </lay-tooltip>
                </template>

                <template #toolbar>
                    <div class="flex">
                        <div class="div1">
                            <lay-input size="sm" v-model="goodsQuery" suffix-icon="layui-icon-search"
                                placeholder="输入订单关键词">
                                <template #suffix>
                                    <lay-icon type="layui-icon-search" @click="QueryChangeGoods()"></lay-icon> &nbsp;
                                </template>
                            </lay-input>
                        </div>
                    </div>
                </template>

                <template #footer>
                    <lay-button type="primary" size="sm" style="float: right;" @click="confirmGoods">确认选中</lay-button>
                </template>
            </lay-table>
        </div>
    </lay-layer>

</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
    getOrder,
    updateOrder,
    addOrderProducts
} from "../../api/path/order.js"
import {
    getProducts,
} from "../../api/path/products.js"
import {
    formatTime
} from "../../utils/date.js"
import { layer } from "@layui/layui-vue";
const tableRef = ref();
const addDataVisible = ref(false)
const addOrderGoodsVisible = ref(false)
const current = ref('全部');
const tabList = ref([
    {
        id: '1',
        title: '全部'
    },
    {
        id: '2',
        title: '待付款'
    },
    {
        id: '3',
        title: '待发货'
    },
    {
        id: '4',
        title: '待收货'
    },
    {
        id: '5',
        title: '待评价'
    },
    {
        id: '5',
        title: '退货'
    }
])
const orderLoading = ref(false)
const page = reactive({ current: 1, limit: 10, total: 100 });
const columns = ref([
    {
        title: '订单编号',
        key: 'orderID',
        width: 50,
    },
    {
        title: '下单用户',
        key: 'userName',
        width: 120,
    },

    {
        title: '订单状态',
        width: 80,
        key: 'orderStatus',
        customSlot: "sts",
    },
    {
        title: '下单渠道',
        width: 80,
        key: 'ordersChannel',
        customSlot: "ordersChannel",
    },
    {
        title: '订单商品',
        key: 'orderProductsList',
        width: 120,
        customSlot: "orderProductsList",
    },
    {
        title: '订单金额',
        width: 120,
        sort: "desc",
        key: 'totalAmount',
    },
    {
        title: '下单时间',
        key: 'orderDate',
        customSlot: "orderDate",
        width: 200,
    },
    {
        title: '收货地址',
        key: 'shippingAddress',
        ellipsisTooltip: true
    },
    {
        title: '操作',
        key: 'operation',
        customSlot: "operation",
        fixed: 'right',
        ignoreExport: true,
        width: 120,
    },
])
const dataSource = ref([])
const addDataForm = ref({
    OrderID: '',
    UserID: '',
    UserName: '',
    OrderDate: '',
    OrderStatus: '',
    TotalAmount: '',
    OrdersChannel: '',
    ShippingAddress: '',
    PaymentMethod: '',
    ConsigneeAddressInfo: '',
})
const columnsGoods = ref([
    {
        fixed: "left",
        type: "checkbox",
        title: "复选"
    },
    {
        title: '商品编号',
        key: 'productID',
        width: 80,
    },
    {
        title: '商品名称',
        key: 'productName',
        width: 200,
    },
    {
        title: '商品图片',
        key: 'productImage',
        ellipsisTooltipTheme: true,
        customSlot: "image",
        width: 80,

    },
    {
        title: '商品介绍',
        key: 'productDescription',
        ellipsisTooltip: true,
        width: 200,
    },
    {
        title: '商品状态',
        key: 'productSts',
        customSlot: 'sts',
        width: 120,
    },
    {
        title: '商品价格',
        key: 'productPrice',
        sort: "desc",
        width: 120,
    },
    {
        title: '商品销量',
        key: 'sales',
        sort: "desc",
        width: 120,
    },
    {
        title: '商品库存',
        key: 'stockQuantity',
        sort: "desc",
        width: 120,
    },
])
const dataSourceGoods = ref([])
const GoodsLoading = ref(false)
const QueryValue = ref('')
const goodsQuery = ref('')
const selectedKeys = ref([]);
onMounted(() => {
    orderLoading.value = true
    setTimeout(() => {
        getOrder({ name: QueryValue.value }).then(res => {
            dataSource.value = res.data
        })
        orderLoading.value = false
    }, 800)
})
const updaData = (val) => {
    addDataVisible.value = true
    addDataForm.value = { ...val }
}
const beforeOrderProductsList = ref([])
const addOrderGoods = () => {
    beforeOrderProductsList.value = addDataForm.value.orderProductsList
    addOrderGoodsVisible.value = true
    GoodsLoading.value = true
    getProducts({ name: goodsQuery.value }).then(res => {
        if (res.code == 1) {
            // res.data 里面的每一项都添加一个id 为 下标+1
            res.data.forEach((item, index) => {
                item.id = index + 1
            })
            dataSourceGoods.value = res.data
            dataSourceGoods.value.forEach((item, index) => {
                beforeOrderProductsList.value.forEach((item2, index2) => {
                    if (item.productID == item2.productID) {
                        selectedKeys.value.push(item.id)
                    }
                })
            })
        } else {
            layer.msg(res.msg, { icon: 2 });
        }
        GoodsLoading.value = false
    })
}

// 修改订单
const addData = () => {
    console.log('上一次', beforeOrderProductsList.value);
    let arr2 = []
    beforeOrderProductsList.value.forEach(item => {
        arr2.push(item.productID)
    })
    let arr = []
    addDataForm.value.orderProductsList.forEach((item, index) => {
        arr.push(item.productID)
    })
    // 移除arr中包含arr2元素的内容
    arr = arr.filter(item => !arr2.includes(item));
    let param = {
        orderID: addDataForm.value.orderID,
        productID: arr,
        quantity: 1,
    }
    updateOrder(addDataForm.value).then(result => {
        if (result.code == 1) {
            if (arr.length == 0 || arr.length == addDataForm.value.orderProductsList.length) {
                layer.msg(result.data, { icon: 1 });
                setTimeout(() => {
                    location.reload()
                }, 1000)
            } else {
                addOrderProducts(param).then(res => {
                    console.log(res);
                    if (res.code == 1) {
                        layer.msg(result.data, { icon: 1 });
                        setTimeout(() => {
                            location.reload()
                        }, 1000)
                    } else {
                        layer.msg(result.msg, { icon: 2 });
                    }
                })
            }
        } else {
            layer.msg(result.msg, { icon: 2 });
        }
    })
}

// 搜索商品
const QueryChangeGoods = () => {
    GoodsLoading.value = true
    getProducts({ name: goodsQuery.value }).then(res => {
        if (res.code == 1) {
            dataSourceGoods.value = res.data
            GoodsLoading.value = false
        } else {
            layer.msg(res.msg, { icon: 2 });
        }
    })
}

const confirmGoods = () => {

    let arr = tableRef.value.getCheckData()
    addDataForm.value.orderProductsList = [...arr]
    addOrderGoodsVisible.value = false
    // 清空选项
    selectedKeys.value = []
}
// 删除订单的某个内容
// const deleteOrderGoods = (val, item) => {
//     layer.confirm("确定要删除该订单的商品吗？",
//         {
//             btn: [
//                 {
//                     text: '确定', callback: (id) => {
//                         addDataForm.value.orderProductsList = addDataForm.value.orderProductsList.filter(product => product.productID !== item.productID);
//                         deleteOrderProducts({ orderID: val.orderID, productID: item.productID }).then(res => {
//                             if (res.code == 1) {
//                                 layer.msg(res.data, { icon: 1 });
//                                 setTimeout(() => {
//                                     location.reload()
//                                 }, 1000)
//                             } else {
//                                 layer.msg(res.msg, { icon: 2 });
//                             }
//                         })
//                         layer.close(id);
//                     }
//                 },
//                 {
//                     text: '取消', callback: (id) => {
//                         layer.close(id);
//                     }
//                 }
//             ]
//         }
//     );
// }



const tabChange = (e) => {
    console.log(e);
    if (e != '全部') {
        getOrder({ name: QueryValue.value, sts: e }).then(res => {
            if (res.code == 1) {
                dataSource.value = res.data
            } else {
                layer.msg(res.msg, { icon: 2 });
            }
        })
    } else {
        getOrder({ name: QueryValue.value }).then(res => {
            if (res.code == 1) {
                dataSource.value = res.data
            } else {
                layer.msg(res.msg, { icon: 2 });
            }
        })
    }
}
</script>
<style scoped lang="less">
.channel img {
    width: 25px;
    padding-right: 5px;
}

.div1 {
    padding-right: 10px;
}

.goods-list {
    width: 100%;

    .goods-item {
        padding: 10px;
        border-bottom: 1px solid #F2F2F2;

        .goods-img {
            img {
                width: 100px;
            }
        }

        .goods-text {
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            h3 {

                font-weight: 700;
            }

            p {
                color: #B9B9B9;
                font-size: 12px;
            }

            span {
                color: #F41130;
            }

            .span1 {
                font-size: 10px;
            }

            .span2 {
                font-size: 20px;
            }

            .span3 {
                color: #333;
                float: right;
            }
        }
    }
}


.order_list {

    .order_item {
        border-radius: 5px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        overflow: hidden;
        height: 224px;

        .item_img {
            img {
                width: 100%;
                height: 136px;
            }

            overflow: hidden;
        }

        .item_img:hover img {
            transform: scale(1.2);
            transition: all 0.3s ease-in-out;
        }

        .item_text {
            padding: 5px;

            .item_title {
                min-height: 35px;
                font-size: 13px;
                font-weight: 700;
            }

            p {
                padding: 5px 0;
                color: #B9B9B9;
                font-size: 11px;
            }

            .item_price {
                span {
                    color: #F41130;
                }

                .span1 {
                    font-size: 10px;
                }

                .span2 {
                    font-size: 20px;
                }

                .span3 {
                    color: #333;
                    float: right;
                    margin-top: 6px;
                }
            }
        }
    }

    .order_item_add {
        width: 100%;
        height: 224px;
        border-radius: 5px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        overflow: hidden;
        background-color: #fff;
        text-align: center;
        line-height: 227px;
    }
}

.delete {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
}
</style>